<div fxLayout="row" [style.padding.px]="5" [style.width.%]="100" fxLayoutAlign="space-between center" >

    <div fxFlex="20" fxLayoutGap="10px" fxLayout="row" fxLayoutAlign="start center">
        <eqm-toggle [enabled]="app.enabled" class="on-off" [(state)]="enabled" (stateChange)="setEnabled()"></eqm-toggle>
        <eqm-icon [@FadeInOut] *ngIf="activeEqualizer && activeEqualizer.settings.length" (click)="enabled && openSettings()" eqmTooltip="Settings" eqmTooltipPositionSide="bottom" name="cog" color="#8E8E93" [size]="16"></eqm-icon>
    </div>

    <div fxLayout="row" fxLayoutAlign="space-around center" fxLayoutGap="20px">
      <eqm-label>Equalizer: </eqm-label>
      <eqm-label 
        [color]="type === 'Basic' ? ui.colors.accent : ui.colors.light"
        (click)="setType('Basic')"
      >
        Basic
      </eqm-label>
      <eqm-label 
        [color]="type === 'Advanced' ? ui.colors.accent : ui.colors.light"
        (click)="setType('Advanced')"
      >
        Advanced
      </eqm-label>
    </div>

    <div fxFlex="20" fxLayoutGap="5px" fxLayout="row" fxLayoutAlign="end center">
      <eqm-icon (click)="toggleVisibility()" [name]="show ? 'hide' : 'show'"></eqm-icon>
    </div>
</div>

<div *ngIf="show" class="equalizers" [@FadeInOut]>
  <eqm-loading *ngIf="!loaded"></eqm-loading>
  <div [style.width.%]="100" fxLayout="row" *ngIf="loaded">
    <eqm-equalizer-presets 
      [enabled]="enabled && app.enabled"
      class="presets"
      [presets]="presets" [selectedPreset]="selectedPreset" 
      (presetSelected)="selectPreset($event)"
      (presetSaved)="savePreset($event)"
      (presetDeleted)="deletePreset()"
      [additionalLeftOption]="activeEqualizer?.additionalPresetOptionLeft"
      [additionalRightOption]="activeEqualizer?.additionalPresetOptionRight"
    ></eqm-equalizer-presets>
  </div>
  <eqm-basic-equalizer *ngIf="loaded && type === 'Basic'" #basicEqualizer
    [enabled]="enabled && app.enabled" class="equalizer" 
    (presetsChange)="presets = $event" (selectedPresetChange)="selectedPreset = $event" 
    [animationDuration]="animationDuration" [animationFps]="animationFps"
    [settingsDialog]="settingsDialog"
  ></eqm-basic-equalizer>
  <eqm-advanced-equalizer *ngIf="loaded && type === 'Advanced'" #advancedEqualizer
    [enabled]="enabled && app.enabled" class="equalizer"
    (presetsChange)="presets = $event" (selectedPresetChange)="selectedPreset = $event"
    [animationDuration]="animationDuration" [animationFps]="animationFps"
    [settingsDialog]="settingsDialog"
  ></eqm-advanced-equalizer>
</div>
